.keda {

    &-alert {
        min-width: 400px;
        // min-height: 400px;
        // width: 80%;
        // height: 60%;
        justify-content: center;
        align-content: center;
        border: 1px #555 solid;
        padding: 0px 15px 16px 15px;
        background-color: white;
        color: #4e4e4e;
    
        display: flex;
        flex-direction: column;
    
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        // background-color: lightslategrey;
    
        animation: mymove 1s;
        -webkit-animation: mymove 1s;
        z-index: 100;
    
    
        &-header {
            display: flex;
            height: 40px;
            justify-content: flex-end;
            align-items: center;
            // background-color: lightsalmon;
    
            flex-direction: row;
    
            border-bottom: 1px solid #ececec;
            // padding-top: 2px;
    
            &>div {
                display: flex;
                align-items: center;
            }
    
            &>div.left {
                justify-content: flex-start;
                flex: 1;
            }
    
            &>div.right {
                justify-content: flex-end;
                margin-right: -6px;
    
                .right_close_icon {
                    width: 24px;
                    height: 24px;
                    background: url(../images/mo-dialog-close.gif);
                    background-repeat: no-repeat;
                    cursor: pointer;

                    &:hover
                    {
                        background-position-x: -23px;
                    }
                }
            }
    
        }
    
        &-body {
            display: flex;
            // height: 100px;
            // justify-content: center;
            // align-items: center;
            // background-color: lightslategrey;
            flex-direction: column;
            flex: 1;
            // padding: 10px 0px 0px 0px;
            // overflow: auto;
            height: calc(100% - 90px);
            overflow: hidden;

            justify-content: center;
            align-items: center;

            &-msg-container
            {
                width: calc(100% - 70px);
                display: flex;
                flex-direction: row;
                // background-color: lightseagreen;
                

                justify-content: flex-start;
                align-items: center;

                &-left
                {
                    display: flex;
                    width: 24px;
                    height: 24px;
                    // background-color: lightslategrey;
                    justify-content: flex-start;

                    &-alert-info {
                        width: 24px;
                        height: 24px;
                        background-color: lightcoral;
                        background: url(../images/info.png) no-repeat;
                        background-position: 50% 50%;
                    }

                }

                &-right
                {
                    width: calc(100% - 24px);
                    padding-left: 9px;
                    line-height: 22px;
                    color:#4e4e4e;
                }

            }
        }
    
        &-footer {
            display: flex;
            height: 40px;
            justify-content: center;
            align-items: center;
            // background-color: lightsteelblue;
            // border-top: 1px solid #ececec;
    
            &>div {
                margin: 0px 4px;
            }
    
        }
    
    
    }
    
    &-alert-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: .3;
        z-index: 99;
    }
    
    @keyframes fadeIn {
        0% {
            opacity: 0;
            /*初始状态 透明度为0*/
        }
    
        50% {
            opacity: 0.5;
            /*中间状态 透明度为1*/
        }
    
        100% {
            opacity: 1;
            /*结尾状态 透明度为0*/
        }
    }
    
    @keyframes fadeOut {
        0% {
            opacity: 1;
            /*初始状态 透明度为0*/
        }
    
        50% {
            opacity: 0.5;
            /*中间状态 透明度为1*/
        }
    
        100% {
            opacity: 0;
            /*结尾状态 透明度为0*/
        }
    }
    
    @keyframes maskfadeIn {
        0% {
            opacity: 0;
            /*初始状态 透明度为0*/
        }
    
        33% {
            opacity: 0.1;
            /*中间状态 透明度为1*/
        }
    
        66% {
            opacity: 0.2;
            /*中间状态 透明度为1*/
        }
    
        100% {
            opacity: 0.3;
            /*结尾状态 透明度为0*/
        }
    }
    
    @keyframes maskfadeOut {
        0% {
            opacity: 0.3;
            /*初始状态 透明度为0*/
        }
    
        33% {
            opacity: 0.2;
            /*中间状态 透明度为1*/
        }
    
        66% {
            opacity: 0.1;
            /*中间状态 透明度为1*/
        }
    
        100% {
            opacity: 0;
            /*结尾状态 透明度为0*/
        }
    }
    
    .fadeIn {
        animation: fadeIn .5s linear;
    }
    
    .fadeOut {
        animation: fadeOut .5s linear;
    }
    
    .maskFadeIn {
        animation: maskfadeIn .3s linear;
    }
    
    .maskFadeOut {
        animation: maskfadeOut .3s linear;
    }
   
}